<template>
	<view class="container">

		<view class="header">
			<view class="header-title"> 点击转盘抽奖获得红包 </view>
		</view>

		<view class="main">
			<view class="canvas-container">
				<view :animation="animationData" class="canvas-content">
					<view class="canvas-line">
						<view class="canvas-litem" v-for="(item,index1) in awardsList" :key="index1" :style="[{transform:'rotate('+item.lineTurn+')'}]"></view>
					</view>

					<view class="canvas-list">
						<view class="canvas-item" v-for="(iteml,index2) in awardsList" :key="index2">
							<view class="canvas-item-text" :style="[{transform:'rotate('+iteml.turn+')'}]">
								<text>{{iteml.award}}</text>
								<!-- <image class="canvas-item-text-img" v-if="iteml.type == 0" src="../../static/img/xiaolian.png"></image>  
                                <image class="canvas-item-text-img"  v-else-if="iteml.type == 1" src="../../static/img/jifenimg.png"></image>  
                                <image class="canvas-item-text-img"  v-else-if="iteml.type == 2" src="../../static/img/youhuiquan.png"></image>  -->
							</view>
						</view>
					</view>
				</view>

				<view @tap="playReward" class="canvas-btn" v-bind:class="btnDisabled">开始 </view>
				<view class="canvas-btn-table">剩余{{chishu}}次</view>
			</view>
		</view>
		<view class="info">

			<view class="info_a"> <text>活动时间：</text>{{activityInfo.time}}</view>
			<view class="info_a"> <text>活动奖品：</text>{{activityInfo.award}}</view>
			<view class="info_a">
				<p><text>活动规则：</text>{{activityInfo.rules}}</p>
			</view>

		</view>
		<view class="info_a info_notice">
			<image :src="Url+'mine/discount/true.png'"></image>
			<swiper autoplay="true" vertical="true" circular="true" interval="2000" class="infolist">
				<swiper-item v-for="(item,index) in activityNotice">
					<view>{{item.info}}</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				Url:this.Imgurl,
				awardsConfig: {
					chance: true,
					awards: [{
							index: 0,
							name: '10元红包',
							type: 2
						},
						{
							index: 1,
							name: '谢谢参与',
							type: 1
						},
						{
							index: 2,
							name: '50元红包',
							type: 2
						},
						{
							index: 3,
							name: '谢谢参与',
							type: 1
						},
						{
							index: 4,
							name: '100元话费',
							type: 0
						},
						{
							index: 5,
							name: '谢谢参与',
							type: 1
						},
						{
							index: 6,
							name: '20元红包',
							type: 2
						},
						{
							index: 7,
							name: '谢谢参与',
							type: 1
						}
					]
				}, //奖品数据
				awardsList: {},
				animationData: {}, // 动画效果
				btnDisabled: '', //改变抽奖按钮
				chishu: 10,
				//活动信息
				activityInfo: {
					time: '2019-12-17',
					award: '口红 100积分   200元现金 120积分',
					rules: '本活动所有会员均可参加，20积分一次中奖积分和红包会自动发放到账户中，实物奖品需要到我的奖品中领取'
				},
				activityNotice: [{
						info: '恭喜 155****2520 手机用户抽中一等奖手机一台'
					},
					{
						info: '恭喜 155****2520 手机用户抽中三等奖耳机一副'
					},
					{
						info: '恭喜 155****2520 手机用户抽中二等奖鼠标一个'
					}
				]
			};
		},
		onLoad: function() {
			// 设置页面导航条颜色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#A83FDB',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		onReady: function(e) {
			// 画抽奖转盘
			this.drawAwardRoundel();

			//分享  
			uni.showShareMenu({
				withShareTicket: true
			});
		},
		methods: {

			//画抽奖圆盘  
			drawAwardRoundel: function() {
				var awards = this.awardsConfig.awards;
				var awardsList = [];
				var turnNum = 1 / awards.length * 360; // 文字旋转 turn 值  

				// 奖项列表  
				for (var i = 0; i < awards.length; i++) {
					awardsList.push({
						turn: i * turnNum + 'deg',
						lineTurn: i * turnNum + turnNum / 2 + 'deg',
						award: awards[i].name,
						type: awards[i].type
					});
				}

				this.btnDisabled = this.awardsConfig.chance ? '' : 'disabled';
				this.awardsList = awardsList;
				console.log(this.awardsList);
			},

			//发起抽奖  
			playReward: function() {
				if (this.chishu == 0) {
					uni.showToast({
						title: '抽奖次数已经用完',
						icon: 'none'
					})
					return
				}
				//中奖index  
				var awardsNum = this.awardsConfig.awards;
				var awardIndex = Math.round(Math.random() * (awardsNum.length - 1)); //随机数  
				var runNum = 8; //旋转8周  
				var duration = 4000; //时长  

				// 旋转角度  
				this.runDeg = this.runDeg || 0;
				this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - awardIndex * (360 / awardsNum.length))
				//创建动画  
				var animationRun = uni.createAnimation({
					duration: duration,
					timingFunction: 'ease'
				})
				animationRun.rotate(this.runDeg).step();
				this.animationData = animationRun.export();
				this.btnDisabled = 'disabled';

				// 中奖提示  
				var awardsConfig = this.awardsConfig;
				var awardType = awardsConfig.awards[awardIndex].type;
				this.chishu = this.chishu - 1;
				if (awardType == 0) {
					setTimeout(function() {
						uni.showModal({
							title: '恭喜',
							content: '获得' + (awardsConfig.awards[awardIndex].name),
							showCancel: false
						});
						this.btnDisabled = '';
					}.bind(this), duration);
				} else {
					setTimeout(function() {
						uni.showModal({
							title: '很遗憾',
							content: '没中奖 ' + (awardsConfig.awards[awardIndex].name),
							showCancel: false
						});
						this.btnDisabled = '';
					}.bind(this), duration);
				}

			}
		}

	}
</script>
<style lang="less" scoped>
	page {
		background: #fff;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100upx;
	}

	/* 转盘 */
	.canvas-container {
		margin: 0 auto;
		position: relative;
		width: 600upx;
		height: 600upx;
		border-radius: 50%;
		box-shadow: 0 10upx 30upx #333, 0 0 10upx #000;
		border: 10rpx solid #A83FDB;
	}

	.canvas-content {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		display: block;
		width: 600upx;
		height: 600upx;
		border-radius: inherit;
		background-clip: padding-box;
		/* background-color: #ffcb3f; */
	}

	.canvas-element {
		position: relative;
		z-index: 1;
		width: inherit;
		height: inherit;
		border-radius: 50%;
	}

	.canvas-list {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 9999;
	}

	.canvas-item {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		color: #e4370e;
		font-weight: bold;
		text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6);
	}

	.canvas-item-text {
		position: relative;
		display: block;
		padding-top: 20upx;
		margin: 0 auto;
		text-align: center;
		-webkit-transform-origin: 50% 300upx;
		transform-origin: 50% 300upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.canvas-item-text text {
		font-size: 30upx;
	}

	.canvas-item-text-img {
		width: 60upx;
		height: 60upx;
		padding-top: 10upx;
	}

	/* 分隔线 */
	.canvas-line {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 99;
	}

	.canvas-litem {
		position: absolute;
		left: 300upx;
		top: 0;
		width: 3upx;
		height: 300upx;
		background-color: rgba(228, 55, 14, 0.4);
		overflow: hidden;
		-webkit-transform-origin: 50% 300upx;
		transform-origin: 50% 300upx;
	}

	/**  
* 抽奖按钮  
*/
	.canvas-btn {
		position: absolute;
		left: 260upx;
		top: 260upx;
		z-index: 400;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		color: #f4e9cc;
		background-color: #e44025;
		line-height: 80upx;
		text-align: center;
		font-size: 26upx;
		text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
		text-decoration: none;
	}

	.canvas-btn::after {
		position: absolute;
		display: block;
		content: ' ';
		left: 12upx;
		top: -44upx;
		width: 0;
		height: 0;
		overflow: hidden;
		border-width: 30upx;
		border-style: solid;
		border-color: transparent;
		border-bottom-color: #e44025;
	}

	.canvas-btn.disabled {
		pointer-events: none;
		background: #b07a7b;
		color: #ccc;
	}

	.canvas-btn.disabled::after {
		border-bottom-color: #b07a7b;
	}

	.canvas-btn-table {
		color: #A83FDB;
		width: 120upx;
		text-align: center;
		position: absolute;
		left: 240upx;
		top: 360upx;
		font-size: 26upx;
		background-color: #FFFFFF;
		opacity: 0.9;
	}

	/* 文字说明 */
	.info {
		margin-top: 40upx;
		margin-left: 70upx;
		margin-right: 70upx;

		.info_a {
			padding: 12upx 0;
		}

		text {
			font-weight: 700;
			font-size: 28upx;
		}

		p {
			line-height: 60upx;
		}

		font-size: 26upx;

	}
	.info_notice {
		
		margin-left: 70upx;
		margin-right: 70upx;
		background: #fff2e8;
		font-size: 22upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;

		image {
			width: 20upx;
			height: 20upx;
			padding: 0 20upx;
		}
		.infolist{
			flex: 1;
			height: 40upx;
			width: 160upx;
		}
		swiper-item {
			height: 40upx;
			flex-direction: ;
			line-height: 40upx;
			margin-left: 15upx;

		}
	}
</style>
